import { useState, useEffect } from 'react'

function Banner() {
  let [oneTop, setoneTop] = useState(0)
  let [twoTop, settwoTop] = useState(44)
  useEffect(() => {
    let time = setInterval(() => {
      if (oneTop === 0) {
        setoneTop(44)
        settwoTop(0)
      } else {
        setoneTop(0)
        settwoTop(44)
      }
    }, 3000)
    return () => {
      clearInterval(time)
    }
  }, [oneTop, twoTop])
  return (
    <>
      <div className="banBox mb18">
        <div
          className={oneTop === 0 ? 'z-index one' : 'one'}
          style={{ top: oneTop }}
        >
          <a href="/" target="_blank;">
            <img
              src="https://dig.chouti.com/images/tmp-01bc96e6b7.png"
              alt="img"
            />
            <span>涉未成年人不良信息举报专区</span>
          </a>
        </div>
        <div
          className={twoTop === 0 ? 'z-index two' : 'two'}
          style={{ top: twoTop }}
        >
          <a href="/" target="_blank;">
            <img
              src="https://dig.chouti.com/images/report-906ef0ec40.png"
              alt="img"
            />
            <span>网上有害信息举报专区</span>
          </a>
        </div>
      </div>
    </>
  )
}
export default Banner
